<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师节感恩卡片 | Teacher's Day Thank You Card</title>
    <link rel="stylesheet" href="card_styles.css">
</head>
<body>
    <div class="container">
    <!-- Include html2canvas library for image export -->
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
        <header>
            <h1>教师节感恩卡片</h1>
            <h2>Teacher's Day Thank You Card</h2>
            <p>为您的老师制作一张特别的感谢卡片</p>
            <p>Create a special thank you card for your teacher</p>
        </header>

        <main>
            <div class="card-creator">
                <div class="controls">
                    <h3>选择模板 | Choose Template</h3>
                    <div class="template-selector">
                        <button class="template-btn active" data-template="classic">
                            <div class="template-preview classic-preview"></div>
                            <span>经典模板 | Classic</span>
                        </button>
                        <button class="template-btn" data-template="modern">
                            <div class="template-preview modern-preview"></div>
                            <span>现代模板 | Modern</span>
                        </button>
                        <button class="template-btn" data-template="elegant">
                            <div class="template-preview elegant-preview"></div>
                            <span>优雅模板 | Elegant</span>
                        </button>
                    </div>

                    <h3>个性化设置 | Personalization</h3>
                    <div class="customization-options">
                        <div class="input-group">
                            <label for="teacher-name">老师姓名 | Teacher's Name:</label>
                            <input type="text" id="teacher-name" placeholder="输入老师姓名 | Enter teacher's name">
                        </div>
                        
                        <div class="input-group">
                            <label for="student-name">您的姓名 | Your Name:</label>
                            <input type="text" id="student-name" placeholder="输入您的姓名 | Enter your name">
                        </div>
                        
                        <div class="input-group">
                            <label for="message">感谢留言 | Thank You Message:</label>
                            <textarea id="message" placeholder="写下您想对老师说的话 | Write your message to your teacher"></textarea>
                        </div>
                        
                        <div class="input-group">
                            <label for="decoration">装饰元素 | Decoration:</label>
                            <select id="decoration">
                                <option value="apple">苹果 | Apple</option>
                                <option value="book">书本 | Book</option>
                                <option value="flower">花朵 | Flower</option>
                                <option value="graduation">毕业帽 | Graduation Cap</option>
                            </select>
                        </div>
                    </div>
                    
                    <button id="preview-btn" class="action-btn">预览卡片 | Preview Card</button>
                    <button id="export-btn" class="action-btn secondary">导出图片 | Export Image</button>
                    <button id="share-btn" class="action-btn secondary">分享卡片 | Share Card</button>
                    <button id="reset-btn" class="action-btn secondary">重置 | Reset</button>
                </div>

                <div class="preview-area">
                    <h3>卡片预览 | Card Preview</h3>
                    <div class="card-preview">
                        <div id="thank-you-card" class="thank-you-card classic">
                            <div class="card-header">
                                <div class="decoration-icon" id="decoration-display"></div>
                                <h2 class="card-title">感谢您</h2>
                                <h2 class="card-title english">Thank You</h2>
                            </div>
                            
                            <div class="card-content">
                                <div class="recipient">
                                    <p>亲爱的老师</p>
                                    <p>Dear Teacher</p>
                                    <p class="teacher-name" id="preview-teacher-name">[老师姓名]</p>
                                </div>
                                
                                <div class="message-container">
                                    <p class="message" id="preview-message">感谢您的辛勤教导和无私奉献。您点燃了我们心中的知识之光，引导我们走向成功的道路。</p>
                                    <p class="message english" id="preview-message-en">Thank you for your dedication and selfless contribution. You have ignited the light of knowledge in our hearts and guided us on the path to success.</p>
                                </div>
                                
                                <div class="sender">
                                    <p>此致</p>
                                    <p>敬礼!</p>
                                    <p>Sincerely,</p>
                                    <p class="student-name" id="preview-student-name">[您的姓名]</p>
                                </div>
                            </div>
                            
                            <div class="card-footer">
                                <p class="date">2024年9月10日</p>
                                <p class="date english">September 10, 2024</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <footer>
            <p>教师节快乐！Happy Teacher's Day!</p>
        </footer>
    </div>

    <script src="card_script.js"></script>
</body>
</html>